<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" content="练习"> </el-page-header>
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <div class="JADP-common-layout-main JADP-flex-main">
        <div class="leftBOX">
          <div style="margin:10px 0">
            <el-button icon="el-icon-plus" @click="SelectedTopicClick"
              >选择练习题</el-button
            >
            <!-- <el-checkbox
              v-model="checked1"
              label="全选"
              border
              style="margin-left:10px; transform: translateY(-2px)"
            ></el-checkbox> -->
            <el-button-group style="margin-left:10px">
              <!-- <el-button icon="el-icon-plus">随机抽题</el-button>
                  <el-button icon="el-icon-plus">定时抽题</el-button>
                  <el-button icon="el-icon-download">导入题目</el-button>
                  <el-button icon="el-icon-upload2">导出题目</el-button>
                  <el-button icon="el-icon-setting" @click="setUp"
                    >考试设置</el-button
                  >
                  <el-button
                    icon="el-icon-document-add"
                    @click="batchVisible = true"
                    >批量设置分数</el-button
                  > -->

              <!-- <el-button icon="el-icon-sort" @click="sortVisible = true"
                >排序</el-button
              > -->
              <el-button icon="el-icon-full-screen" @click="setOpenFlag"
                >展开</el-button
              >
            </el-button-group>
          </div>

          <el-card
            shadow="hover"
            class="mysubject"
            v-for="(item, index) in list"
            :key="item.id"
          >
            <div class="subject_title">
              <!-- <input
                type="checkbox"
                v-model="checkboxList"
                class="checkbox"
                :value="item.id"
              /> -->
              &nbsp;
              <span class="font">
                {{ index + 1 }}、[{{
                  getDict("topictype", item.topictype)
                }}]</span
              >
              [难度系数：{{
                getDict("difficultion", item.subjectEntity.difficultion)
              }}]
              <div class="title_right">
                <el-button-group>
                  <el-button
                    icon="el-icon-full-screen"
                    @click="$set(item, 'openFlag', !item.openFlag)"
                    >{{ item.openFlag ? "收起" : "展开" }}</el-button
                  >
                  <!-- <el-button icon="el-icon-edit">编辑</el-button> -->
                  <el-button icon="el-icon-delete" @click="delete_(item)"
                    >删除</el-button
                  >
                </el-button-group>

                <el-button-group style="margin-left:10px">
                  <el-button
                    icon="el-icon-sort-up"
                    @click="moveUp(index)"
                  ></el-button>
                  <el-button
                    icon="el-icon-sort-down"
                    @click="moveDown(index)"
                  ></el-button>
                </el-button-group>
              </div>
            </div>
            <div class="subject_body">
              <div v-html="item.subjectEntity.stem"></div>
              <!--单选题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === '7280c24ba6bf410997c739637706e7e6'"
              >
                <el-radio-group disabled v-model="item.subjectEntity.result">
                  <ul>
                    <li
                      v-for="(val, inx) in item.subjectEntity.optionsum"
                      :key="inx"
                    >
                      <el-radio :label="val.id"
                        >{{ val.label }}、{{ val.value }}</el-radio
                      >
                    </li>
                  </ul>
                </el-radio-group>
                <div>
                  <el-row>
                    <el-col :span="1">解析:</el-col>
                    <el-col :span="22">
                      <div v-html="item.subjectEntity.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!--多选题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === '1d3f7e7e22c94e49ba95f52e3ec9e3af'"
              >
                <el-checkbox-group disabled v-model="item.subjectEntity.result">
                  <ul>
                    <li
                      v-for="(val, inx) in item.subjectEntity.optionsum"
                      :key="inx"
                    >
                      <!-- <el-radio :label="val.id">{{ val.value }}</el-radio> -->
                      <el-checkbox :label="val.id"
                        >{{ val.label }}、{{ val.value }}</el-checkbox
                      >
                    </li>
                  </ul>
                </el-checkbox-group>
                <div>
                  <el-row>
                    <el-col :span="1">解析:</el-col>
                    <el-col :span="22">
                      <div v-html="item.subjectEntity.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!--填空题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === 'f0b4073bc9ad4426b87cbc70d4526cf6'"
              >
                <div style="margin:20px 0">
                  答案：
                  <span
                    v-for="(val, inx) in item.subjectEntity.optionsum"
                    :key="inx"
                    style="margin-right:10px"
                  >
                    <!-- <el-radio :label="val.id">{{ val.value }}</el-radio> -->
                    {{ val.value }};
                  </span>
                </div>
                <div>
                  <el-row>
                    <el-col :span="1">解析:</el-col>
                    <el-col :span="22">
                      <div v-html="item.subjectEntity.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!--判断题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === 'ee505074164e4d0bb54e4a5136b123fb'"
              >
                <div style="margin:20px 0">
                  答案：
                  <el-radio-group disabled v-model="item.subjectEntity.result">
                    <el-radio label="正确"></el-radio>
                    <el-radio label="错误"></el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <el-row>
                    <el-col :span="1">解析:</el-col>
                    <el-col :span="22">
                      <div v-html="item.subjectEntity.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- 简单题 -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === '07ba1e3b779b4e1db3c1318d0f80a688'"
              >
                <div style="margin:20px 0">
                  答案：
                  <p v-html="item.subjectEntity.result"></p>
                </div>
                <div>
                  <el-row>
                    <el-col :span="1">解析:</el-col>
                    <el-col :span="22">
                      <div v-html="item.subjectEntity.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <SelectedTopic
        v-if="SelectedTopic"
        ref="SelectedTopic"
        @refresh="refresh"
        :TmList="list"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import SelectedTopic from "../../xy_ks_examination_paper/selectedTopic.vue";
export default {
  name: "practice",
  components: {
    SelectedTopic
  },
  data() {
    return {
      list: [],
      query: {
        courseid: ""
      },
      listQuery: {
        currentPage: 1,
        pageSize: 500,
        sort: "desc",
        sidx: ""
      },
      courseid: "",
      loading: false,
      SelectedTopic: false,
      checkboxList: [] // 题目多选框,
    };
  },
  computed: {
    checked1: {
      get() {
        if (!this.checkboxList.length) return false;
        return this.checkboxList.length === this.list.length;
      },
      set(val) {
        if (val) {
          this.checkboxList = this.list.map(item => item.id);
        } else {
          this.checkboxList = [];
        }
      }
    }
  },
  methods: {
    goBack() {
      this.$emit("refresh", true);
    },

    //手动选题
    SelectedTopicClick() {
      this.SelectedTopic = true;
      this.$nextTick(() => {
        this.$refs.SelectedTopic.init();
        this.$refs.SelectedTopic.courseid = this.courseid;
        this.$refs.SelectedTopic.subjectEntityList = this.list.map(
          item => item.subjectEntity.id
        );
      });
    },
    //展开全部题目
    setOpenFlag() {
      this.openFlag = !this.openFlag;
      this.list.forEach(item => {
        item.openFlag = this.openFlag;
      });
    },
    refresh(isrRefresh) {
      this.SelectedTopic = false;
      if (isrRefresh) {
        this.initData();
      }
    },
    //上移题目
    moveUp(index) {
      if (index === 0)
        return this.$message({
          message: "已经是第一个选项了",
          type: "warning",
          duration: 1000
        });
      let temp = this.list[index];
      this.$set(this.list, index, this.list[index - 1]);
      this.$set(this.list, index - 1, temp);
    },
    //下移题目
    moveDown(index) {
      if (index === this.list.length - 1)
        return this.$message({
          message: "已经是最后一个选项",
          type: "warning",
          duration: 1000
        });
      let temp = this.list[index];
      this.$set(this.list, index, this.list[index + 1]);
      this.$set(this.list, index + 1, temp);
    },
    //删除题目
    delete_(item) {
      this.$confirm("你确定删除该试题吗？")
        .then(_ => {
          request({
            url: `/api/manualselect/Xy_ks_subject_paper/${item.id}`,
            method: "delete"
          }).then(res => {
            this.$message.success(res.msg);
            this.initData();
          });
        })
        .catch(_ => {});
    },
    initData() {
      this.loading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        courseid: this.courseid,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: "/api/manualselect/Xy_ks_subject_paper",
        method: "get",
        data: query
      }).then(res => {
        this.list = res.data.list;
        this.list.forEach(item => {
          item.openFlag = false;
          // 不等于简答题，不等于判断题
          if (
            item.topictype !== "07ba1e3b779b4e1db3c1318d0f80a688" &&
            item.topictype !== "ee505074164e4d0bb54e4a5136b123fb"
          ) {
            item.subjectEntity.result = JSON.parse(item.subjectEntity.result);
            item.subjectEntity.optionsum = JSON.parse(
              item.subjectEntity.optionsum
            );
          }
        });
        this.list = JSON.parse(JSON.stringify(this.list));
        console.log(this.list, "this.list");
        this.loading = false;
      });
    }
  }
};
</script>
<style scoped lang="scss">
li {
  list-style: none;
}

.JADP-preview-main {
  width: 100%;
  box-sizing: border-box;
  .leftBOX {
    width: 1280px;
    margin: 20px auto;
    .timer {
      margin-right: 20px;
      color: #aaaaaa;
    }
    .fraction {
      margin-bottom: 20px;
      color: rgb(236, 102, 26);
      span {
        font-size: 40px;
        font-family: "Segoe UI";
        font-weight: bold;
      }
    }
    li {
      list-style: none;
    }

    .mysubject {
      margin-bottom: 20px;
      width: 1280px;
      .subject_title {
        width: 1280px;
        .checkbox {
          cursor: pointer;
        }
        .font {
          font-size: 18px;
          font-weight: 600;
        }
        .title_right {
          float: right;
          margin-right: 50px;
        }
      }
      .subject_body {
        width: 1180px;
        margin-top: 20px;
        margin-left: 25px;
        line-height: 22px;
        ul {
          margin-top: 20px;
          li {
            line-height: 30px;
            >>> .el-radio__label {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
.sorts {
  margin-top: 20px;
  li {
    line-height: 30px;
  }
}
</style>
